<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="https://static.122.gov.cn/V1.30.2-YWJG/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="https://static.122.gov.cn/V1.30.2-YWJG/static/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://static.122.gov.cn/V1.30.2-YWJG/static/css/main.css" rel="stylesheet" media="screen">
    <link href="https://static.122.gov.cn/V1.30.2-YWJG/static/css/docs.css" rel="stylesheet" media="screen">
    <link href="https://static.122.gov.cn/V1.30.2-YWJG/static/css/new.css" rel="stylesheet" media="screen">    
    <title>检验标志电子凭证查看</title>
    <script>
        var html = document.getElementsByTagName("html")[0];
        html.style.fontSize = 22 + "px";
    </script>
    <link href="https://static.122.gov.cn/V1.30.2-YWJG/static/css/mui.min.css" rel="stylesheet">

  <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background-color: white;
        }

        .box {
            width: 14rem;
            margin: 0 auto;
            position: relative;
            border-radius: .4rem;
            overflow: hidden;
            box-shadow: 0px 0px 2px #888888;
            background-color: #ebfaff;
        }

        .top {
            background-image: linear-gradient(#0d4cae, #0d4cae, #0d4cae, #0d4cae, #0d4cae, #0d4cae, #0d4cae, #0d4cae, #0d4cae, #0d4cae, #0d4cae, #9fbfe3, #ebfaff);
            font-family: NJHG-YEAR;
            padding: .68rem 0 .8rem 0;
            height: 14rem;
        }

        .top .num {
            position: absolute;
            width: 1.5rem;
            height: 1.5rem;
            line-height: 1.5rem;
            border: 2px solid #fff;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            font-weight: bold;
        }

        .top .num.active {
            color: #005aa0;
            background: #ffd83b;
            border: 2px solid #ffd83b;
        }

        .top .title1 {
            text-align: center;
            color: #fff;
            font-weight: bold;
            font-size: 1.1rem;
            transform: scale(1, 1.2);
            letter-spacing: 0.1rem;
        }

        .top .title5 {
            text-align: center;
            color: #fff;
            font-size: 0.85rem;
            width: 100%;
            text-align: center;
            letter-spacing: 0.2rem;
            margin-top: .2rem;
        }

        .top .title2 {
            width: 8rem;
            margin: .1rem auto 0  auto;
        }

        .top .title3 {
            position: absolute;
            color: #fff;
            width: 100%;
            top: 8.1rem;
            font-size: 5.4rem;
            text-align: center;
        }

        .foot {
            border: 1px solid #d1cfd0;
        }

        .foot .title4 {
            position: absolute;
            color: #221814;
            border-bottom: 4px solid #221814;
            left: 2.68rem;
            top: 0.7rem;
            transform: scale(1, 1.2);
            letter-spacing: 0.1rem;
            font-size: 0.9rem;
        }

        .foot .left {
            position: absolute;
            color: #606060;
            font-size: 0.52rem;
            letter-spacing: 0.02rem;
            left: 0.4rem;
            margin-top: 1rem;
        }

        .foot .right {
            position: absolute;
            border-bottom: 2px dashed #666;
            font-size: 0.57rem;
            letter-spacing: 0rem;
            padding-bottom: 0.26rem;
            left: 4rem;
            margin-top: 1rem;
        }

        .foot .img {
            position: absolute;
            right: 0.4rem;
            bottom: 3.2rem;
            width: 5.5rem;
        }

        .info {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: .6rem;
            height: 4.48rem;
        }

        .info .left {
            width: 57%;
        }

        .info .right {
            width: 43%;
            text-align: center;
        }

        .info .left .tit {
            color: #ccc;
            font-size: .95rem;
            text-align: right;
            letter-spacing: .24rem;
            font-weight: 100;
            margin-bottom: 0.4rem;
        }

        .info .left .val {
            color: #fff;
            font-size: 1.3rem;
            text-align: right;
            letter-spacing: .1rem;
        }

        body {
            line-height: normal;
        }

        .box-container {
            background-image: linear-gradient(#3c82f9, #52cdfe) !important;
            width: 15rem;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            padding: .35rem 0 !important;
        }
        .box-container * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-user-select: none;
            outline: 0;
            -webkit-tap-highlight-color: transparent;
            -webkit-tap-highlight-color: transparent
        }

        .mui-table-view{
            background-color: #ebfaff;
        }

        .mui-table-view-cell .tit {
            display: inline-block;
            width: 30%;
            color: #7d8688;
            font-size: 0.57rem;
            vertical-align: top;
        }

        .mui-table-view-cell .val {
            display: inline-block;
            width: 68%;
            text-align: right;
            color: #000;
            padding-right: .3rem;
            font-size: 0.57rem;
        }

        .mui-table-view:before, .mui-table-view:after {
            height: 0;
        }
        .mui-table-view-cell:after{
            background-color: #eee;
        }
    </style>
</head>
<body>

	<#list rows as row>
	<div id="mem-content">   
	    <div class="box-container">
	        <div class="box">
	            <div class="top">
	                <div class="title1" style="    font-family: 方正大黑体;">机动车检验合格标志</div>
	                <div class="title5">（电子凭证）</div>
	                <div class="title2" style="font-family: 黑体">
	                    <img src="https://static.122.gov.cn/V1.30.2-YWJG/static/img/jian.jpg" style="width: 100%">
	                </div>
	                <div class="info">
	                    <div class="left">
	                        <div class="tit">检验有效期至</div>
	                        <div class="val" id="yxqz">${row.yxqz?if_exists?string("yyyy-MM-dd")}</div>
	                    </div>
	                    <div class="right">
	                        <img id="ewm" src="/cert.png" style="width: 80%">
	                    </div>
	                </div>
	            </div>
	
	            <ul style="margin-top: -1px;" class="mui-table-view no-click">
	                <li class="mui-table-view-cell">
	                    <span class="tit">号牌号码</span>
	                    <span class="val" id="hphm">${row.hphm?if_exists}</span>
	                </li>
	                <li class="mui-table-view-cell">
	                    <span class="tit">号牌种类</span>
	                    <span class="val" id="hpzlStr">${row.hpzlStr?if_exists}</span>
	                </li>
	                <li class="mui-table-view-cell">
	                    <span class="tit">车辆识别代号</span>
	                    <span class="val" id="clsbdh">${row.clsbdhMask?if_exists}</span>
	                </li>
	                <li class="mui-table-view-cell">
	                    <span class="tit">使用性质</span>
	                    <span class="val" id="syxzStr">${row.syxzStr?if_exists}</span>
	                </li>
	                <li class="mui-table-view-cell">
	                    <span class="tit">车辆类型</span>
	                    <span class="val" id="cllxStr">${row.cllxStr?if_exists}</span>
	                </li>
	                <li class="mui-table-view-cell">
	                    <span class="tit">检验机构</span>
	                    <span class="val" id="cjdw" style="white-space: normal;">${row.cjdw?if_exists}</span>
	                </li>
	                <li class="mui-table-view-cell">
	                    <span class="tit">合格标志号</span>
	                    <span class="val" id="jyhgbzbh">${row.jyhgbzbh?if_exists}</span>
	                </li>
	            </ul>
	        </div>
	    </div>
	</div>
	</#list>
</body>
</html>